<script>
import { defineComponent, ref, watch } from 'vue';
import { createNamespace } from '../utils';
import FanButton from '../button/button.vue';

export default defineComponent({
  name: createNamespace('Dialog')[0],
  components: { FanButton },
  emits: ['update:show', 'confirm', 'cancel'],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: String,
    message: String,
    cancelText: {
      type: String,
      default: '取消',
    },
    cancelColor: {
      type: String,
      default: '#84878F',
    },
    showCancel: {
      type: Boolean,
      default: false,
    },
    confirmText: {
      type: String,
      default: '确定',
    },
    confirmColor: {
      type: String,
      default: '#F7931E',
    },
    callback: {
      type: Function,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    const innerShow = ref(props.show);

    watch(
      () => props.show,
      (val) => {
        if (props.message || props.title) innerShow.value = val;
      },
    );
    watch(innerShow, (val) => emit('update:show', val));

    const getActionHandler = (action) => {
      emit(action);
      innerShow.value = false;
      props.callback?.(action);
    };

    const onCancel = () => getActionHandler('cancel');

    const onConfirm = () => getActionHandler('confirm');

    return { innerShow, onCancel, onConfirm };
  },
});
</script>

<template>
  <transition name="fan">
    <div v-if="innerShow" class="fan-dialog__o">
      <div class="fan-dialog">
        <div class="fan-dialog__inner">
          <div v-if="title" class="fan-dialog__t">{{ title }}</div>
          <div
            class="fan-dialog__c"
            :class="{ 'fan-dialog__his_title': !title }"
          >
            {{ message }}
          </div>
        </div>
        <div class="fan-flex fan-hairline--top">
          <div
            v-if="showCancel"
            class="fan-dialog__btn fan-flex-center fan-hairline--right fan-dialog__cancel"
            :style="{ '--dialog-cancel': cancelColor }"
            @click="onCancel"
          >
            {{ cancelText }}
          </div>
          <div
            class="fan-dialog__btn fan-flex-center"
            :style="{ '--dialog-confirm': confirmColor }"
            @click="onConfirm"
          >
            {{ confirmText }}
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<style lang="less">
.fan-enter-active,
.fan-leave-active {
  transition: opacity 0.3s ease;
}

.fan-enter-from,
.fan-leave-to {
  opacity: 0;
}

.fan-dialog {
  border-radius: 16px;
  width: 320px;
  font-size: 16px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  background-color: #fff;

  &__o {
    position: fixed;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.8);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  &__inner {
    padding: 26px 24px;
  }

  &__t {
    text-align: center;
    color: #323233;
    font-weight: 600;
    line-height: 24px;
  }

  &__c {
    max-height: 60vh;
    font-size: 14px;
    overflow-y: auto;
    color: #646566;
    line-height: 20px;
    white-space: pre-wrap;
    text-align: center;
    word-wrap: break-word;
    padding-top: 8px;
  }

  &__his_title {
    padding-top: 26px;
    color: #323233;
  }

  &__btn {
    flex: 1;
    height: 48px;
    font-size: 16px;
    color: var(--dialog-confirm);
  }

  &__cancel {
    color: var(--dialog-cancel);
  }
}
</style>
